<template>
  <div class="detailsEchart">
    <div id="myChart" class="echarts_container"></div>
    <div class="baseDataline"></div>
  </div>
</template>

<script>
export default {
  props: ['xAxisData', 'seriesData'],
  data() {
    return {
      drawObj: {}
    }
  },
  methods: {
    drawLine(obj) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const option = {
        // tooltip: {
        //   trigger: 'axis',
        //   formatter: '{b0}<br /> {a0}:{c0}%<br />{a1}: {c1}%' // 提示值添加百分比
        // },
        grid: {
          left: '40px',
          right: '0px'
        },
        title: {
          text: '各机构新业务价值(亿元)',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal',
            color: '#fff',
            marginTop: 20
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 80,
            height: 1,
            bottom: 20
          },
          {
            type: 'inside',
            realtime: true,
            // start: 0,
            // end: 5,
            zoomOnMouseWheel: false
          }
        ],
        // legend: {
        //   data: ['13率', '25率'],
        //   itemWidth: 12, // 图例的宽度
        //   itemHeight: 12, // 图例的高度
        //   textStyle: {
        //     color: 'rgba(255, 255, 255, 0.16)', // 标题字体颜色
        //     fontSize: '12px' // 标题字体大小
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            data: obj.xAxisData,
            axisLabel: {
              // 0表示强制显示X轴全部值,1表示间隔1个展示，依次类推
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            splitNumber: 4, // 把y轴的值分成3份
            show: true,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(208, 213, 255, 0.3)'
              }
            },
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value}',
              color: '#AFB4CC'
            }
          }
        ],
        series: [
          {
            // name: '13率',
            type: 'bar',
            data: obj.seriesData,
            barWidth: 12,
            itemStyle: {
              color: 'rgba(91, 143, 249, 0.85)',
              width: 8
            }
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  },
  watch: {
    xAxisData(val) {
      this.drawObj.xAxisData = this.xAxisData
      this.drawObj.seriesData = this.seriesData
      this.drawLine(this.drawObj)
    }
  }
}
</script>

<style lang="scss" scoped>
.detailsEchart {
  .echarts_container {
    height: 240px;
    margin: 10px auto;
    background: #192264;
  }
  .baseDataline {
    height: 1px;
    width: 100vh;
    margin: 10px -20px;
    background-color: #0b144b;
  }
}
</style>
